@media only screen 
and (min-device-width : 320px)
and (max-device-width : 700px)
and (-webkit-min-device-pixel-ratio: 1){
    #container {
        /* background-color: brown; */
        z-index: 99;
        /* color: brown; */
        min-height: 100%;
        overflow: auto;

    }

    #main-heading{

        font-weight: 600;
        font-size: 2.8rem;
        line-height: 3.8rem;
        margin: 4.0rem 1.6rem 0.8rem 1.6rem;
    }

    #sub-heading{
        font-weight: 500;
        font-size: 1.6rem;
        line-height: 2.2rem;
        margin: 0 1.6rem 4rem 1.6rem;
    }

    #input-field, .btnContainer{
        display: flex;
        justify-content: center;
        width: 100%;
        height: 5.2rem;
        margin: 0;
        padding: 0;
        left: 0;
        background-color: transparent;
    }

    #user-input{
        height: 100%;
        width: 25.5rem;
        /* left: calc(50% - 288px/2); */
        /* margin: auto; */
        padding: 0 1.6rem 0 1.6rem;
        font-size: 1.6rem;
        line-height: 2.2rem;
        
    }

    #btn{
        display: none;
    }

   #outputDiv{
    position: absolute;
    font-weight: 500;
    font-size: 2.0rem;
    line-height: 2.7rem;
    margin: 13rem 0 0 0;
    color: #FFFFFF;
    width: 100%;
    text-align: center;
    }

    #mobileBtn{
        display: block;
        background: #00B7FF;
        position: absolute;
        border-radius: 4px;
        width: 28.8rem;
        height: 4.0rem;
        border: none;
        color: #FFFFFF;
        font-weight: 600;
        font-size: 1.6rem;
        line-height: 2.2rem;
        /* z-index: 5; */
        margin: 1rem auto 1rem auto
        /* bottom: 6rem */

    }

    .btnContainer{
        margin: 1rem auto 1rem auto;
        /* overflow: hidden; */
        /* background-color: red; */
        /* z-index: 99; */
        height: 10rem
    }

}